<template>
  <div class="container">
    <nav-bar title="从业人员发展趋势情况"></nav-bar>
    <div class="chart-box chart1">
      <div class="chart-box-header">
          <pub-area
            :maxSelectLevel="4"
            @change="changeArea"
            customRightIcon
            label=""
            :isLink="false"
            valueIsLast
            ></pub-area>
        <div class="area-detail" @click="goDetailArea">
          区域分布情况
        </div>
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
            <div class="left">
              <img src="./img/cyryzs.png" alt="">
              <div class="label">从业人员总数（人）</div>
          </div>
          <div class="value">
              <count-to
                :startVal="0"
                :endVal="Number(state.detail.total)"
                :decimals="0"
                :duration="2000"
              ></count-to>
          </div>
        </div>
      </div>
    </div>

    <div class="chart-box chart2">
      <div class="chart-box-header">
        年龄分析
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
          <div class="age1" id="age1"></div>
        </div>
      </div>
    </div>

    <div class="chart-box chart3">
      <div class="chart-box-header">
        职业类型分析
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
          <div class="occupationType" id="occupationType"></div>
        </div>
      </div>
    </div>
    <div :class="['chart-box','chart4',active === 0 ? 'chart5':'']">
      <div class="chart-box-header">
        护理员分析
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
          <van-tabs v-model:active="active" type="card" @change="changeTab">
            <van-tab title="持证分析">
              <div class="certificate-item">
                <div class="left">
                  <img src="./img/cz.png" alt="">
                  <div class="label">
                    持证人数（人）
                  </div>
                </div>
                <div class="right">
                  <count-to
                    :startVal="0"
                    :endVal="Number(state.detail.hasCert)"
                    :decimals="0"
                    :duration="1500"
                  ></count-to>
                </div>
              </div>
              <div class="certificate-item">
                <div class="left">
                  <img src="./img/fcz.png" alt="">
                  <div class="label">
                    非持证人数（人）
                  </div>
                </div>
                <div class="right">
                  <count-to
                    :startVal="0"
                    :endVal="Number(state.detail.noCert)"
                    :decimals="0"
                    :duration="1500"
                  ></count-to>
                </div>
              </div>
            </van-tab>
            <van-tab title="等级分析">
              <ul class="content-box">
                <li>
                  <div class="top-text">
                    <div class="label">一级/高级技师</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.nurse5)"
                        :decimals="0"
                        :duration="1500"
                      ></count-to>
                    </div>
                  </div>
                  <div class="bottom-line">
                    <div
                      class="inner-line"
                      :style="{ width: (state.detail.nurse5 / maxNum) * 100 + '%' }"
                    ></div>
                  </div>
                </li>
                <li>
                  <div class="top-text">
                    <div class="label">二级/技师</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.nurse4)"
                        :decimals="0"
                        :duration="1500"
                      ></count-to>
                    </div>
                  </div>
                  <div class="bottom-line">
                    <div
                      class="inner-line"
                      :style="{ width: (state.detail.nurse4 / maxNum) * 100 + '%' }"
                    ></div>
                  </div>
                </li>
                <li>
                  <div class="top-text">
                    <div class="label">三级/高级工</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.nurse3)"
                        :decimals="0"
                        :duration="1500"
                      ></count-to>
                    </div>
                  </div>
                  <div class="bottom-line">
                    <div
                      class="inner-line"
                      :style="{ width: (state.detail.nurse3 / maxNum) * 100 + '%' }"
                    ></div>
                  </div>
                </li>
                <li>
                  <div class="top-text">
                    <div class="label">四级/中级工</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.nurse2)"
                        :decimals="0"
                        :duration="1500"
                      ></count-to>
                    </div>
                  </div>
                  <div class="bottom-line">
                    <div
                      class="inner-line"
                      :style="{ width: (state.detail.nurse2 / maxNum) * 100 + '%' }"
                    ></div>
                  </div>
                </li>
                <li>
                  <div class="top-text">
                    <div class="label">五级/初级工</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.nurse1)"
                        :decimals="0"
                        :duration="1500"
                      ></count-to>
                    </div>
                  </div>
                  <div class="bottom-line">
                    <div
                      class="inner-line"
                      :style="{ width: (state.detail.nurse1 / maxNum) * 100 + '%' }"
                    ></div>
                  </div>
                </li>
                <!-- <li>
                  <div class="top-text">
                    <div class="label">未评级</div>
                    <div class="value">
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.nurse6)"
                        :decimals="0"
                        :duration="1500"
                      ></count-to>
                    </div>
                  </div>
                  <div class="bottom-line">
                    <div
                      class="inner-line"
                      :style="{ width: (state.detail.nurse6 / maxNum) * 100 + '%' }"
                    ></div>
                  </div>
                </li> -->
              </ul>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/pinia/modules/user'
import { CountTo } from 'vue3-count-to'
import * as echarts from 'echarts'
import { ref, reactive, onBeforeMount,onMounted,nextTick,onBeforeUnmount } from 'vue'
import { get_personnel_analysis } from '@/api/elderDistribution'
import { appCurrentState } from '@/pinia/modules/app.js'
import { formatDictCode } from '@/utils/format.js'
import { useRouter } from 'vue-router'
const active = ref(0);
const router = useRouter()
const state = reactive({
  searchParams: {
    areaCode:useUserStore().userLastArea
  },
  detail: {},
  myChart1:null,
  myChart2:null
})
const maxNum = ref(0)
const getElderDetail = async () => {
  let res = await get_personnel_analysis(state.searchParams)
  if (res.succeed) {
    state.detail = res.data
    let numArr = [state.detail.nurse1, state.detail.nurse2, state.detail.nurse3, state.detail.nurse4, state.detail.nurse5, state.detail.nurse6]
    maxNum.value = Math.max.apply(null, numArr)
    nextTick(() => {
      initChartAge()
      initChartOccupationType()
    })
  }
}

const changeArea = val => {
  state.searchParams.areaCode = val
  getElderDetail()
}

// 年龄分析
const  initChartAge = async () => {
  state.myChart1 = echarts.init(document.getElementById('age1'))
  const data = [
          { value: state.detail.age1, name: '30岁及以下' },
          { value: state.detail.age2, name: '30岁及40岁' },
          { value: state.detail.age3, name: '40岁至45岁' },
          { value: state.detail.age4, name: '45岁至55岁' },
          { value: state.detail.age5, name: '56岁及以上' }

        ]
  const option = {
    title: [{
        // text: state.detail.total,
        // top: '50%',
        // left: '40%',
        // padding:[-15,0,0,-15],
        // textStyle: {
        //     color: '#333',
        //     fontSize: 36,
        //     fontWeight: '400',
        // },
    }],
    legend: {
      top: 'middle',
      right: '0%',
      orient  : 'vertical'
    },
    toolbox: {
      show: false,
    },

      tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}人',
      backgroundColor: 'rgba(47,37,198,0.75)',
      borderColor :'#2880FF',
        borderWidth: 1,
        textStyle:{
          color  :'#fff'
        }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: ['40%','70%'],
        center: ['40%', '50%'],
        roseType: 'area',
        label: {
          show: false,
          formatter: '{b}:{c}',
        },
        labelLine: {
          length: 2, //第一条线
          length: 5, //第二条线
          lineStyle: {
              width: 1, // 线条的宽度
          }
        },
        selectedOffset :30,
        selectedMode: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
        data: data
      }
    ]
  };

  state.myChart1 .setOption(option)
}

const initChartOccupationType = async () => {
  state.myChart2 = echarts.init(document.getElementById('occupationType'))
  const lineData = [
    state.detail.occupation1,
    state.detail.occupation2,
    state.detail.occupation3,
    state.detail.occupation4,
    state.detail.occupation5,
    state.detail.occupation6,
    state.detail.occupation7,
    state.detail.occupation8,
    state.detail.occupation9,
    state.detail.occupation10,
    state.detail.occupation11,
    state.detail.occupation12,
    state.detail.occupation13
  ]
  const xData = [
    '养老护理员',
    '医师',
    '康复师',
    '技师',
    '营养师',
    '护士',
    '心理咨询师',
    '社会工作者',
    '护师',
    '医生',
    '院长或其他管理人员',
    '老年人能力评估师',
    '其他',
  ]
  const option = {
    color: ['#2675FF'],
    // color: ['#2CD09B', '#2675FF'],
    tooltip: {
      // trigger: 'axis',
      // borderWidth: '0',
      formatter: '{b}: {c}人',
      backgroundColor: 'rgba(73,81,92,.95)', // 背景颜色
      textStyle: {
        color: '#fff' // 字体颜色
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
      left: '0%',
      right: '10%',
      bottom: '5%',
      top: '5%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        // type: 'category',
        boundaryGap: false, // 坐标轴两端不留空
        axisLine: {
          show: true, // 隐藏X轴轴线
          lineStyle: {
            color: '#D9D9D9'
          }
        },
        axisLabel: {
          show: true,
          // formatter: '{value}月',
            padding: [2, 0, 0, 0],
            color: '#333'
        },
        axisTick: {
          show: false // 隐藏X轴刻度
        },
        axisPointer: {
          type: 'shadow'
        },
        // data: xData
      }
    ],
    yAxis: [
      {
        // type: 'value',
        type: 'category',
        minInterval: 1,
        axisLabel: {
          // rotate: 20,
          color: '#666',
          margin: 20
        },
        // name的样式设计
        splitLine: {
          lineStyle: {
            type: 'solid', // 设置网格线类型 dotted：虚线 solid:实线
            color: '#E9E9E9'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: xData
      }
    ],
    series: [
      {
        type: 'bar',
        // yAxisIndex: 1,
        // symbol: 'none',
        // areaStyle: {
        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //     {
        //       offset: 0,
        //       color: 'rgb(182, 209, 255)'
        //     },
        //     {
        //       offset: 1,
        //       color: 'rgb(250, 252, 255)'
        //     }
        //   ])
        // },
        // smooth: true,
        stack: true, // 堆叠柱状图
        barWidth: 14, // 柱状图宽度
        itemStyle: {
          normal: {
            label:{
            show: true,
            position: 'right',
          },
          barBorderRadius: [10, 10, 10, 10]
          }
        },
        data: lineData
      }
    ]
  }

  state.myChart2.setOption(option)
}

const goDetailArea = () => {
  router.push('/personnelArea')
}

const changeTab = val => {
}
onBeforeUnmount(() => {
  state.myChart1 && state.myChart1.dispose()
  state.myChart2 && state.myChart2.dispose()
})

onMounted(() => {
  getElderDetail()
})
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.container {
  height: 100%;
  background-color: #f8f8f8;
  overflow-y: auto;

  .chart-box {
    // width: calc(100% - 80px);
    width: 100%;
    font-size: 30px;
    font-family: Microsoft YaHei;
    color: #000000;
    margin-top: 20px;
    background-color: #fff;

    .chart-box-header {
      display: flex;
      align-items: center;
      height: 90px;
      border-bottom: 1px solid #E6E6E6;
    }
  }

  .chart1 {
    height: 250px;

    .chart-box-header {
      justify-content: space-between;
      :deep(.van-cell) {
          width: 220px;
          height: 100%;
        }
      .area-detail {
        padding-right: 40px;
        font-weight: 400;
        color: #4375E4;
      }
    }

    .chart-box-content {
      .bottom-box {
        height: 140px;
        width: 100%;
        display: flex;
        padding: 0 40px;
        justify-content:space-between;
        align-items: center;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;

        .left {
          display: flex;
          align-items: center;
        }

        .value{
          font-size: 36px;
        }

        img {
          width: 97px;
          height: 97px;
          margin-right: 20px;
        }
      }
    }
  }

  .chart2 {
    height: 490px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

      .bottom-box {
        padding: 0 40px;
        .age1 {
          width: 100%;
          height: 400px;
        }
      }
  }

  .chart3 {
    height: 690px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

      .bottom-box {
        width: 100%;
        height: 600px;
        padding: 0 40px;
        overflow-x: auto;

        .occupationType {
          width: 100%;
          height: 100%;
        }
      }
  }

  .chart4 {
    // height: 800px;
    height: 710px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

      .bottom-box {
        :deep(.van-tabs) {
          height: 680px;
          padding: 0 40px;
        }

        :deep(.van-tabs__wrap) {
          border-radius: 5px;
          margin: 30px 0;
        }
        :deep(.van-tabs__nav--card) {
          width: 506px;
          height: 60px;
          background: #E8F2FE;
          border-radius: 5px;
          margin: 0 auto;
        }

        :deep(.van-tab){
          width: 250px;
          padding: 0;

          .van-tab__text--ellipsis {
            font-size: 24px;
            color: #000000;
          }
        }

        :deep(.van-tab--active){
          background: #4375E4;
          .van-tab__text--ellipsis {
            font-size: 24px;
            color: #FFFFFF;
            font-weight: normal;
          }
        }
        .certificate-item {
          height: 100px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #000000;
          border-bottom: 1px dashed #959595;

          .left {
            display: flex;
            align-items: center;
            img {
              width: 51px;
              height: 51px;
              margin-right: 25px;
            }
          }

          .right {
            font-size: 36px;
          }
        }

        .certificate-item:nth-child(2){
          border-bottom: none;
        }

        .content-box {
          background-color: #fff;
          // padding: 30px 40px;
          overflow: auto;
          // height: 590px;
          height: 500px;
          li {
            margin: 0px 0 24px 0;
            .top-text {
              display: flex;
              justify-content: space-between;
              .label {
                font-size: 30px;
              }
              .value {
                font-size: 30px;
                font-family: Microsoft YaHei;
              }
            }
            .bottom-line {
              margin-top: 20px;
              width: 100%;
              height: 10px;
              border-radius: 5px;
              .inner-line {
                width: 0%;
                transition: 1000ms;
                height: 100%;
                border-radius: 5px;
                background-color: #2588ff;
              }
            }
          }
        }
      }
  }

  .chart5 {
    height: 410px;
  }
}
</style>
